<template>
  <div class="pageVue">
    <!-- onlyOffice在线预览 -->
    <el-watermark :font="font" :content="watermarkTxt">

    <div class="Online" v-loading="iframeLoading">
      <div style="width: 100%">
        <div class="Online_title">
          <div class="logos">
            <Logo :collapse="isCollapse"></Logo>
          </div>
          <div class="titles">
            <span class="titles_1">{{ fileDetail?.fileName }}</span>
            <span class="historyText" v-if="route.query?.versionId"> - (历史版本:{{ fileDetail?.versionNameValue}})</span>
          </div>

          <div class="userClass">
            <div class="edit-btn">
              <el-button v-if="fileDetail.edit" type="primary" size="small" @click="handlerEdit">编辑</el-button>
              <el-button v-if="fileDetail.libraryType != 'archives'" :disabled="!fileDetail.download" type="success"
                size="small" @click="handlerDownload">下载</el-button>
            </div>
            <div class="avatar-wrapper">
              <!-- <user-avatar></user-avatar> -->
            </div>
          </div>
        </div>
      </div>
      <!-- 文档预览的位置 -->
      <div style=""><iframe :src="onlineSrc" scrolling="auto" frameborder="0" class="iframeClass"></iframe></div>
    </div>
  </el-watermark>

  </div>
</template>

<script setup lang='ts'>
import Logo from '@/layout/components/Sidebar/Logo.vue';
import useAppStore from '@/store/modules/app';
import onlinePreviewApi from '@/api/onlinePreview/onlinePreviewApi'
const font = reactive({
  color: 'rgba(0, 0, 0, .15)',
})
const watermarkTxt = ref("")
const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const appStore = useAppStore();
const isCollapse = computed(() => !appStore.sidebar.opened);
const route = useRoute();
const router = useRouter();
const onlineSrc = ref("")

const iframeLoading = ref(false)
const fileDetail: any = ref({})


const getFileDataInfo = () => {
  let params = {
    moduleId: route.query.moduleId,//文件id
    versionId: route.query.versionId,//文件版本
    type: route.query.type,//类型 不同模块库编码
  }
  onlinePreviewApi.getFileDataInfo(params).then((res: any) => {
    onlineSrc.value = 'http://' + res.data.url
    fileDetail.value = res.data
    fileDetail.value.versionNameValue = proxy.$moment(fileDetail.versionName).format('YYYY-MM-DD HH:mm:ss')
    
    watermarkTxt.value = res.data.watermarkTxt
  })
}

// 跳转编辑
const handlerEdit = () => {

}
// 下载
const handlerDownload = () => {

}

onMounted(() => {
  getFileDataInfo()
})
</script>
<style scoped lang='scss'>
$height1: calc(100vh - 54px);

.pageVue {
  height: $height1;
}
.Online_title {
	height: 50px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 20px;
	border-bottom: 1px solid #e6e6e6;
	.titles {
		padding: 0 4px 2px;
	}
	.titles_1{
		border-bottom: 1px #626262 solid;
	}
	.historyText{
		font-size: 12px;
		color: #999;
		margin-top: 6px;
		text-align: center;
	}
	.userClass {
		display: flex;
		align-items: center;
	}
	.edit-btn {
		margin-right: 20px;
	}
	.avatar-wrapper {
		// margin-top: 5px;
		// position: relative;

		.user-avatar {
			cursor: pointer;
			width: 40px;
			height: 40px;
			border-radius: 10px;
		}
	}
}
.iframeClass {
  width: 100%;
  height: $height1;
}
</style>